<template>
    <div class="charts_box">
        <div :id="state.chartBoxId" class="charts-radar"></div>
    </div>
</template>
<script setup>
import * as echarts from 'echarts';
import {onMounted, reactive} from "vue";

const props = defineProps({
    type: {
        type: String,
        default: '1'
    },
    chartData: {
        type: Object,
        default: ()=>{}
    }
})
const state = reactive({
    chartBoxId: `charts-radar${new Date().getTime()}`
})
onMounted(()=>{
    init('#00A84C')
})

let myChart
const init = (str) => {
    if(str === '#00D6B1'){
        str = '#00A84C'
    }else{
        str = '#00D6B1'
    }
    let chartDom = document.getElementById(state.chartBoxId);
    if(!myChart){
        myChart = echarts.init(chartDom);
    }
    let bg = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
            offset: 0,
            color: '#00D6B1'
        },
        {
            offset: 1,
            color: str
        }
    ])
    let option = {
        radar: [
            {
                indicator: [
                    { text: 'CO安全等级', max: 100},
                    { text: '温度安全等级', max: 100},
                    { text: '氢气安全等级', max: 100},
                    { text: '烟雾安全等级', max: 100}
                ],
                radius: 90,
                splitNumber: 4,
                axisName: {
                    color: 'rgba(255,255,255,1)',
                    fontSize: 14
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(0, 185, 255, 0.3)',
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: [
                            "rgba(233, 233, 233, 0.2)",
                            "rgba(233, 233, 233, 0.2)",
                            "rgba(233, 233, 233, 0.2)",
                            "rgba(233, 233, 233, 0.2)"
                        ],
                    },
                },
                splitArea: {
                    areaStyle: {
                        color: "rgba(0,185,255,0.32)"
                    },
                },

            }
        ],
        series: [
            {
                type: 'radar',
                tooltip: {
                    trigger: 'item'
                },
                itemStyle: {
                    color: 'rgba(0,0,0,0)',
                    borderColor: 'rgba(0,0,0,0)'
                },
                areaStyle: {
                    color: bg
                },
                data: [
                    {
                        value: [60, 60, 75, 40],
                        name: 'A Software'
                    }
                ]
            }
        ]
    };
    option && myChart.setOption(option);
    setTimeout(()=>{
        init(str)
    }, 1000)
}
</script>
<style scoped lang="less">
.charts_box{
    width: 100%;
    height: 100%;
}
.charts-radar{
    width: 100%;
    height: 100%;
}
</style>
